<style type="text/css">
</style>
<template>
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
        <Form-item label="读卡器名称" prop="readername">
            <i-input v-model="formValidate.readername" placeholder="请输入读卡器名称"></i-input>
        </Form-item>
        <Form-item label="读卡器地址" prop="address">
            <i-input v-model="formValidate.address" placeholder="请输入读卡器地址"></i-input>
        </Form-item>
        <Form-item label="摄像头IP" prop="camip">
            <i-input v-model="formValidate.camip" placeholder="请输入摄像头IP"></i-input>
        </Form-item>
        <Form-item label="摄像头端口号" prop="camport">
            <i-input v-model="formValidate.camport" placeholder="请输入摄像头端口号"></i-input>
        </Form-item>
        <Form-item label="摄像头访问用户名" prop="camuser">
            <i-input v-model="formValidate.camuser" placeholder="请输入摄像头访问用户名"></i-input>
        </Form-item>
        <Form-item label="摄像头密码" prop="campwd">
            <i-input v-model="formValidate.campwd" type="password" placeholder="请输入摄像头密码"></i-input>
        </Form-item>
        <Form-item label="进出类型" prop="inouttype">
            <i-select v-model="formValidate.inouttype" placeholder="请选择进出类型">
                <i-option value="进">进</i-option>
                <i-option value="出">出</i-option>
            </i-select>
        </Form-item>
        <Form-item label="大屏LED的IP" prop="bigledip">
            <i-input v-model="formValidate.bigledip"  placeholder="请输入大屏LED的IP"></i-input>
        </Form-item>
        <Form-item label="大屏LED的端口" prop="bigledport">
            <i-input v-model="formValidate.bigledport"  placeholder="请输入大屏LED的端口"></i-input>
        </Form-item>
        <Form-item label="大屏LED的宽度" prop="bigledwidth">
            <i-input v-model="formValidate.bigledwidth"  placeholder="请输入大屏LED的宽度"></i-input>
        </Form-item>
        <Form-item label="大屏LED的高度" prop="bigledheight">
            <i-input v-model="formValidate.bigledheight"  placeholder="请输入大屏LED的高度"></i-input>
        </Form-item>
        <Form-item label="小屏LED的IP" prop="smallledip">
            <i-input v-model="formValidate.smallledip"  placeholder="请输入小屏LED的IP"></i-input>
        </Form-item>
        <Form-item label="小屏LED的端口" prop="smallledport">
            <i-input v-model="formValidate.smallledport"  placeholder="请输入小屏LED的端口"></i-input>
        </Form-item>
        <Form-item label="小屏LED的宽度" prop="smallledwidth">
            <i-input v-model="formValidate.smallledwidth"  placeholder="请输入小屏LED的宽度"></i-input>
        </Form-item>
        <Form-item label="小屏LED的高度" prop="smalledheight">
            <i-input v-model="formValidate.smalledheight"  placeholder="请输入小屏LED的高度"></i-input>
        </Form-item>
        <Form-item label="值班室LED的IP" prop="zbledip">
            <i-input v-model="formValidate.zbledip"  placeholder="请输入值班室LED的IP"></i-input>
        </Form-item>
        <Form-item label="值班室LED的端口" prop="zbledport">
            <i-input v-model="formValidate.zbledport"  placeholder="请输入值班室LED的端口"></i-input>
        </Form-item>
        <Form-item label="值班室LED的宽度" prop="zbledwidth">
            <i-input v-model="formValidate.zbledwidth"  placeholder="请输入值班室LED的宽度"></i-input>
        </Form-item>
        <Form-item label="值班室LED的高度" prop="zbledheight">
            <i-input v-model="formValidate.zbledheight"  placeholder="请输入值班室LED的高度"></i-input>
        </Form-item>
        <Form-item label="面部识别设备IP" prop="facedeviceip">
            <i-input v-model="formValidate.facedeviceip"  placeholder="请输入面部识别设备IP"></i-input>
        </Form-item>
        <Form-item label="备注说明" prop="comment">
            <i-input v-model="formValidate.comment"  placeholder="请输入备注说明"></i-input>
        </Form-item>
        <Form-item label="可软件开启" prop="issoftopen">
            <i-select v-model="formValidate.issoftopen" placeholder="请选择可软件开启">
                <i-option value="true">是</i-option>
                <i-option value="false">否</i-option>
            </i-select>
        </Form-item>
        <Form-item label="可遥控开启" prop="isremoteopen">
            <i-select v-model="formValidate.isremoteopen" placeholder="请选择可遥控开启">
                <i-option value="true">是</i-option>
                <i-option value="false">否</i-option>
            </i-select>
        </Form-item>
        <Form-item label="人脸识别设备地址" prop="FaceControllIP">
            <i-input v-model="formValidate.FaceControllIP" placeholder="请输入人脸识别设备地址"></i-input>
        </Form-item>
        <Form-item>
            <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
            <i-button type="ghost" @click="jumpPage()" style="margin-left: 8px">返回</i-button>
        </Form-item>
    </i-form>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';

    export default {
        data() {
            return {
                formValidate: {
                    //添加字段
                    address: '',
                    camip: '',
                    readername: '',
                    camport: '',
                    camuser: '',
                    campwd: '',
                    inouttype: '',
                    issoftopen: '',
                    isremoteopen: '',
                    bigledip: '',
                    bigledport: '',
                    bigledwidth: '',
                    bigledheight: '',
                    smallledip: '',
                    smallledport: '',
                    smallledwidth: '',
                    smalledheight: '',
                    zbledip: '',
                    zbledport: '',
                    zbledwidth: '',
                    zbledheight: '',
                    facedeviceip: '',
                    comment: '',
                },
                ruleValidate: {
                },
                carId:'',
            }
        },
        created: function () {

                 this.carId =this.$route.query.id
        },

        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                this.$router.back(-1)

            },
            //添加
            handleSubmit(name) {

                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                })
            },
            addData: function (model) {
                let that = this;

                model.forctrlid =this.$route.query.id;
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.post(that,apiUtil.urls.AddGateReader, params, function (res) {
                    that.$Loading.finish();


                    that.$Notice.open({
                        title: '通知',
                        desc: '添加成功 '
                    });
                    // that.$Modal.confirm({
                    //     title: '操作成功',
                    //     content: '请选择下一步操作',
                    //     okText: '继续添加',
                    //     cancelText: '返回列表',
                    //     onOk: () => {
                    //         // baseUtil.pageJump(that,'','GateServerAdd')
                    //     },
                    //     onCancel: () => {
                    //         baseUtil.pageJump(that,that.$route.query.id,'GateCardList')
                    //
                    //     }
                    // });
                });
            },

            uploadList() {
                let that = this;
                this.imageList = that.$refs.upload ? that.$refs.upload.fileList : [];
                console.log('this.imageList:', this.imageList);
                // return ;
            },

        }
    }
</script>
